<template>
  <div class="todo">
    <el-card>
      <el-table :data="todoList">
        <el-table-column
          label="流程名称"
          prop="processInstance.name"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="流程节点"
          prop="name"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="时间"
          prop="createTime"
          width="200"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="processDetail(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageFn">
        <el-pagination

          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.pageNum"
          :page-sizes="[5, 10, 15, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          :pagerCount="5"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  created () {
    this.todoFn()
  },

  data () {
    return {
      todoList: [],
      pageData: {
        total: 0,
        pageSize: 10,
        page: 0,
        pageNum: 1,
      },
    }
  },
  methods: {
    todoFn () {
      let params = {
        size: this.pageData.pageSize,
        page: this.pageData.pageNum,
      }
      this.$http
        .get('/api/flow/core/todo-page', { params: params })
        .then((response) => {
          this.todoList = response.data.result.list
          this.pageData.total = response.data.result.total
        })
    },
    // 流程处理
    processDetail (row) {
      let json = {
        formId: row.formId,
        processInstanceId: row.processInstance.id,
        processDefinitionId: row.processInstance.processDefinitionId,
        processName: row.processInstance.name,
        createTime: row.createTime,
        taskCode: row.taskCode,
        type: '流程处理',
        id: row.id,
        processDefinitionKey: row.processDefinitionKey
      }
      this.$emit('listenClickDetail', json)
    },
    // 分页
    handleSizeChange (val) {
      this.pageData.pageSize = val
      this.todoFn()
    },
    handleCurrentChange (val) {
      this.pageData.pageNum = val
      this.todoFn()
    },
  },
}
</script>
<style lang="less" scoped>
@import "../../admin/styles/formStyle.less";

.el-pagination {
  width: 100%;
  margin-top: 30px;
  white-space: normal !important
}

::v-deep .el-pagination__total {
  margin: 0px;
}

::v-deep .el-pagination__jump {
  margin: 0px;
}

::v-deep .el-table__fixed-right::before {
  height: 0px;
}

</style>
